<template>
    <div class="containe" style="background-color: #f0f0f0;">
        <!-- <div>detail</div> -->
        <div class="cp-container">
            <div class="information">
                <div class="informationo">
                    <div class="img-wjj">
                        <el-carousel :interval="5000" arrow="always">
                            <el-carousel-item v-for="(item,index) in listitem.serviceImgs" :key="index">
                                <el-image
                                    :src="`${basefile}${item.fileShowUrl}`"
                                    style="width: 500px; height: 410px"
                                    fit="contain">
                                </el-image>
                            </el-carousel-item>
                        </el-carousel>
                        <!-- <img :src="`${basefile}${listitem.serviceImgs[0].fileShowUrl}`" alt=""> -->
                    </div>
                    <div>
                        <shareTooltip class="share"></shareTooltip>
                        <collection :collectionSourceId="listitem.id" :classId="listitem['supplyDemandClass.id']">
                            <!-- <span slot-scope="isColl">{{isColl.data ? 'yijingsouc' : 'weishouc'}}</span> -->
                            <span slot-scope="isColl" class="span-btn-item">
                                <i :class="`icon icon-collection${isColl.data ? '_hover' : ''}`"></i>
                                {{isColl.data ? '取消收藏' : '收藏产品'}}
                            </span>
                        </collection>
                    </div>
                </div>
                <div class="informationt">
                    <div class="machinery"><span>{{listitem.serviceName}}</span><span class="flrt"> {{listitem.serviceLocationProvince.label}}</span></div>
                    <div class="newMachine"><span v-for="(val,i) in listitem.serviceTags" :key="i">{{val}}</span></div>
                    <div class="public" v-if="listitem.supplyDemandType==='EQUIPMENT_LEASING'">
                        <span class="much">价格</span>
                        <span v-if="listitem.discussionFlag===1">商议</span>
                        <span v-else class="numDay">{{tofloat(listitem.servicePrice)}}/台/天</span>
                    </div>
                    <div class="public" v-if="listitem.supplyDemandType==='CAPABILITY_SERVICE'">
                        <span class="much">价格</span>
                        <span v-if="listitem.discussionFlag===1">商议</span>
                        <span v-else class="numDay">{{tofloat(listitem.servicePrice)}}</span>
                    </div>
                    <div class="public" v-if="listitem.supplyDemandType==='LABOR_FORCE'">
                        <span class="much">价格</span>
                        <span v-if="listitem.discussionFlag===1">商议</span>
                        <span v-else class="numDay">{{tofloat(listitem.servicePrice)}}/人/天</span>
                    </div>
                    <div class="score"><span class="numbers">评分</span><span class="stars"><span><span class="numbs">{{listitem.totalScore}}</span><span>
                        <el-rate
                            v-model="listitem.totalScore"
                            class="elrate"
                            disabled=""
                            text-color="#ff9900">
                        </el-rate>
                    </span></span><span><span class="quality">质量 : </span>
                        <span class="achievement">{{listitem.evalQuality||4.5}}</span>
                        <span class="quality">速度 : </span><span class="achievement">{{listitem.evalSpeed||4.5}}</span>
                        <span class="quality">服务 : </span><span class="achievement">{{listitem.evalService||4.5}}</span></span></span></div>
                    <!-- 设备租赁 -->
                    <div v-if="listitem.supplyDemandType==='EQUIPMENT_LEASING'">
                        <div class="public"><span class="numbers">规格</span><span class="nearbs">{{FILTER_FORMATER.wordNum(listitem.equipmentSpecs,35)}}</span></div>
                        <div class="public"><span class="numbers">数量</span><span>{{listitem.equipmentNum}}</span></div>
                        <div class="public"><span class="transactions">成交次数</span><span>{{listitem.orderNum}}</span></div>
                    </div>
                    <!-- 能力服务 -->
                    <div v-if="listitem.supplyDemandType==='CAPABILITY_SERVICE'">
                        <div class="public"><span class="transactions">成交次数</span><span>{{listitem.orderNum}}</span></div>
                    </div>
                    <!-- 劳动力 -->
                    <div v-if="listitem.supplyDemandType==='LABOR_FORCE'">
                        <div class="public"><span class="numbes">班组负责人</span><span>{{listitem.teamLeader}}</span></div>
                        <div class="public"><span class="transactions">团队人数</span><span>{{listitem.peopleNum}}</span></div>
                        <div class="public"><span class="transactions">成交次数</span><span>{{listitem.orderNum}}</span></div>
                    </div>
                    <!-- 公共部分 -->
                    <div class="score"><span class="transactions">支付方式</span><span class="stars"><span><span>京东金融</span><span>
                    </span></span><span>
                        <span class="quality"><img class="rl-img" src="~/static/img/qd/po.png" alt=""></span><span class="achievements">唯一指定</span>
                        <span class="quality"><img class="rl-img" src="~/static/img/qd/much.png" alt=""></span><span class="achievements">100%备付金</span>
                        <span class="quality"><img class="rl-img" src="~/static/img/qd/lov.png" alt=""></span><span class="achievements">双方放心</span></span></span>
                    </div>
                    <div class="lease">
                        <span v-if="listitem.supplyDemandType==='EQUIPMENT_LEASING'" class="immedlease" @click="handleOption">立即租赁</span>
                        <span v-if="listitem.supplyDemandType==='CAPABILITY_SERVICE'" class="immedlease" @click="handleOption">购买服务</span>
                        <span v-if="listitem.supplyDemandType==='LABOR_FORCE'" class="immedlease" @click="handleOption">立即雇佣</span>
                        <span class="span-btn-item" @click="open53Server">
                            <i class="icon icon-weixin_hover"></i>
                            <i class="icon icon-weixin"></i>
                            联系TA
                        </span>
                        <!-- <span class="contact" @mouseleave="dohover"> <svg v-if="isHover" @mouseenter="gohover" t="1589953281029" class="wewhat" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6908" width="16" height="16"><path d="M804.867649 519.752294c-18.652828 0-36.709604 18.665472-36.709605 37.330944 0 18.652828 18.056776 37.3183 36.709605 37.3183 28.308878 0 45.756958-19.274168 45.756957-37.3183 0-18.06942-17.446274-37.330944-45.756957-37.330944zM612.841233 519.752294c-18.665472 0-37.330944 18.665472-37.330944 37.330944 0 18.652828 18.665472 37.3183 37.330944 37.3183 28.296234 0 45.756958-19.274168 45.756957-37.3183 0-18.06942-17.460724-37.330944-45.756957-37.330944z" fill="#1296db" p-id="6909"></path><path d="M904.809384 843.033066c7.62044 25.079357 15.253523 50.162327 22.873963 75.24349 1.811638 7.210428 0 14.446143-6.020129 19.261525-3.001937 3.003743-7.224878 4.206685-11.442401 4.206685-3.001937 0-6.020129-1.202942-8.426013-2.393241l-89.69144-48.77515c-34.314557 8.42782-68.629115 16.259588-102.336783 16.259587-133.647597 0-252.850856-72.837606-297.390422-181.205355-9.022066 4.219329-36.724054 6.627019-43.957963 6.627019-38.521242 0-69.819413-6.627019-105.934771-13.850091h-0.60689l-13.851897-3.016386c-38.918611 19.471046-77.849865 38.945704-116.781119 58.404106-6.020129 3.003743-14.446143 2.407691-19.870221-2.40769-5.411434-4.826218-7.817318-12.038453-5.411433-19.272362 10.226815-30.889965 20.466273-61.790768 30.691281-92.693377C46.961706 593.792842 0 509.512836 0 416.808622 0 242.824532 164.962024 101.357811 368.41639 101.357811c179.406361 0 338.333805 111.980188 370.240672 260.063091v3.623276c75.853993 6.614376 147.48685 37.3183 201.062932 87.28375 54.184778 50.559695 84.2782 115.578177 84.2782 183.016993 0.001806 72.8358-42.740571 146.874542-119.18881 207.688145z m68.618277-207.093899c0-121.61095-121.002254-223.945926-264.874859-223.945926-146.282102 0-265.472718 100.537788-265.472718 223.945926s119.190616 223.933283 265.472718 223.933283c31.906867 0 64.42243-8.426014 95.722407-16.243332 1.204748-0.596052 3.01458-0.596052 4.219328-0.596052 3.003743 0 6.020129 1.190299 8.42782 2.393241 18.056776 9.831253 36.113552 19.671536 54.168522 29.500982-4.206685-14.245653-8.426014-28.494918-12.632699-42.740571-2.407691-6.614376 0-14.446143 6.020129-18.665472 71.034999-52.969192 109.556242-116.188679 108.949352-177.582079zM161.335135 711.77871c26.695924-13.440079 53.379204-26.880158 80.073321-40.320237 3.612439-1.215586 7.831768-1.811638 11.4424-1.215586 6.415692 1.215586 12.833189 2.420334 19.261525 3.623276 31.906867 6.628825 61.406043 12.647149 95.707957 12.647149 10.237652 0 20.47711-0.60689 30.107872-1.217392h2.40769c-5.424077-19.261524-7.831768-38.521242-7.831767-57.186714 0-141.466721 133.040707-258.26229 297.392228-261.860279C659.788489 241.62159 521.932401 147.712628 367.820338 147.712628c-176.375524 0-319.655689 121.002254-319.65569 269.70469 0 82.466562 42.742377 154.112063 127.022384 213.097772 6.612569 4.829831 9.03471 12.647149 6.612569 19.87022-6.811254 20.464467-13.636957 40.928933-20.464466 61.3934z" fill="#1296db" p-id="6910"></path><path d="M299.798113 311.468097c0-27.093292-18.663666-45.758764-45.756958-45.758764-26.48279 0-54.779024 17.44808-54.779024 45.758764 0 28.281784 28.296234 45.742508 54.779024 45.742507 27.701988 0.597859 45.756958-18.05497 45.756958-45.742507zM499.063856 357.808463c27.685732 0 45.756958-18.652828 45.756958-45.74612 0-27.091486-18.665472-45.744314-45.756958-45.744314-26.486402 0-54.78083 17.449886-54.78083 45.744314 0 27.687538 28.294428 45.74612 54.78083 45.74612z" fill="#1296db" p-id="6911"></path></svg> <svg v-else class="wewhat" t="1589953041022" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6434" width="16" height="16"><path d="M683.264 324.288c10.24 0 20.224 0.448 30.4 1.408C690.688 179.776 547.584 67.328 374.4 67.328c-189.184 0-342.528 134.208-342.528 299.712 0 92.544 48 175.296 123.264 230.336-9.6 48.128-21.568 111.424-19.84 109.312 2.624-0.96 68.8-37.696 110.4-61.76 39.744 14.016 83.136 21.888 128.704 21.888 4.8 0 9.472-0.128 14.272-0.256-5.312-20.672-8.064-41.856-8.064-64-0.064-153.664 135.424-278.272 302.656-278.272z m-174.336-97.856c23.68 0 42.816 19.136 42.816 42.752 0 23.68-19.2 42.88-42.816 42.88-23.616 0-42.816-19.264-42.816-42.88 0-23.616 19.2-42.752 42.816-42.752z m-262.976 85.632c-23.68 0-42.752-19.264-42.752-42.88 0-23.616 19.136-42.752 42.752-42.752s42.816 19.136 42.816 42.752c0 23.68-19.2 42.88-42.816 42.88z m746.176 281.28c0-138.496-131.392-250.752-293.504-250.752-162.176 0-293.632 112.32-293.632 250.752 0 138.496 131.456 250.88 293.632 250.88 44.096 0 85.888-8.384 123.52-23.296C860.864 841.6 903.04 863.36 905.152 864c1.472 1.6-6.848-38.912-15.872-79.808 62.848-46.208 102.848-114.432 102.848-190.848z m-403.648-55.04c-23.68 0-42.88-19.136-42.88-42.752 0-23.616 19.2-42.88 42.88-42.88 23.616 0 42.752 19.264 42.752 42.88 0 23.616-19.136 42.752-42.752 42.752z m214.016 0c-23.616 0-42.88-19.136-42.88-42.752 0-23.616 19.264-42.88 42.88-42.88s42.88 19.264 42.88 42.88c0 23.616-19.264 42.752-42.88 42.752z" p-id="6435" fill="#1296db"></path></svg> 联系TA</span> -->
                        <span @click="gettel(listitem.serviceContactMobile)" v-if="listitem.openMobileFlag==1">
                            <span class="contact" @mouseleave="dohovers"> <svg v-if="isHovers" @mouseenter="gohovers" class="wewhat" t="1589953833386" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8551" width="16" height="16"><path d="M0.73451 216.631062c0.511265-33.232257 4.090124-60.329328 17.383026-85.892603 4.090124-7.668982 9.202779-15.337965 15.337965-21.47315 17.383027-18.405558 34.766053-36.29985 52.660345-54.194142 19.939354-19.939354 42.435036-36.811115 69.020842-47.036425 21.473151-8.180248 43.457567-10.22531 65.953248-5.623921 29.653398 5.62392 53.682876 20.961885 75.156027 40.90124 32.209726 29.653398 57.261735 64.930717 79.246151 102.764363 11.759106 20.45062 19.939354 41.92377 23.518213 64.930717 5.112655 33.232257-2.045062 63.908186-22.495682 90.493992-15.337965 19.939354-32.720991 37.833646-50.104018 55.727939-6.646451 6.646451-7.668982 12.270372-4.601389 20.961885 7.157717 21.984416 18.916823 41.412505 32.720991 59.306797 19.428089 25.052009 40.389974 49.592753 61.863124 73.62223 20.961885 23.518213 42.946301 45.502629 64.930718 67.487045 16.360496 15.84923 32.720991 31.69846 50.104018 46.52516 31.187195 26.585806 62.885655 53.682876 100.719301 70.554637 6.646451 3.067593 14.315434 5.112655 21.473151 6.646452 2.556327 0.511265 6.646451-1.533796 8.691513-3.578859 9.714044-9.202779 18.916823-18.916823 28.630868-28.630867 13.804168-13.292903 28.630867-26.07454 45.502628-34.254788 21.984416-10.736575 44.991363-15.337965 70.043372-12.270372 30.675929 3.578858 57.773 15.337965 82.82501 32.209726 21.984416 14.315434 42.946301 29.653398 63.396921 46.52516 23.518213 18.916823 42.946301 41.92377 56.239204 69.532106 9.714044 19.939354 14.315434 40.901239 12.270371 63.396921-2.556327 28.630867-13.804168 54.705407-32.209725 76.689824-17.894292 20.961885-36.811115 40.901239-56.239204 60.329328-12.781637 12.270372-24.540744 25.563275-41.412505 34.254788-15.337965 7.668982-31.187195 13.292903-48.058956 14.826699-11.247841 1.022531-23.006947 3.067593-34.766054 2.556327-23.518213-1.533796-47.547691-4.090124-70.554637-8.180248-37.322381-7.157717-73.110965-19.428089-107.877019-34.254788-34.254788-14.826699-67.487045-30.675929-98.674239-50.615283-25.052009-15.84923-50.104018-31.187195-74.644762-48.058956-20.45062-13.804168-39.878708-29.142133-59.306797-44.480098-22.495682-18.405558-44.991363-37.322381-66.464514-57.261735-22.495682-20.45062-44.480098-41.92377-65.953248-63.396921-17.894292-17.894292-34.766053-37.322381-51.126549-56.239204-27.608336-32.720991-55.216673-65.953248-78.734885-102.253098-19.939354-30.675929-39.878708-61.863124-58.284266-93.561584-24.540744-42.946301-44.991363-88.44893-58.795532-135.996621C10.959819 305.079992 5.847164 280.027983 1.245775 254.975974c0-15.84923 0-29.653398-0.511265-38.344912z m69.020841-4.090124c0.511265 9.202779 0 17.894292 2.045062 27.097071 4.601389 23.006947 9.202779 46.013894 15.84923 67.99831 11.759106 40.389974 29.142133 78.734886 49.592753 115.546001 12.781637 23.006947 25.563275 45.502629 39.878708 67.487045 24.029478 37.833646 50.104018 73.622231 79.757416 107.877018 20.961885 24.029478 41.412505 48.058956 63.396921 71.065903 20.961885 21.984416 42.946301 41.92377 64.930717 62.885656 13.292903 12.270372 27.097071 24.540744 41.412505 36.299849 26.585806 20.961885 53.171611 42.435036 81.291213 62.37439 40.901239 28.630867 83.84754 54.194142 129.350169 75.156027 32.720991 15.337965 65.953248 28.630867 100.719302 37.322381 26.585806 7.157717 53.171611 11.759106 80.268682 11.247841 4.090124 0 7.668982-1.022531 11.759106-1.022531 16.360496-1.533796 32.209726-5.62392 43.457567-18.916823 3.578858-4.090124 7.668982-8.180248 11.759106-11.759106 22.495682-20.45062 44.480098-40.901239 60.329328-66.97578 8.691513-14.315434 12.270372-30.164664 6.135186-46.525159-4.601389-12.270372-11.759106-23.518213-20.961885-32.720992-12.781637-12.270372-26.07454-24.540744-39.367443-35.788584-20.45062-16.871761-42.435036-30.675929-66.464514-41.412505-24.540744-10.736575-47.036425-10.22531-67.487045 8.180248-16.871761 14.826699-32.720991 30.675929-49.081487 46.013894-1.533796 1.533796-3.578858 3.578858-5.62392 4.60139-15.84923 10.22531-32.209726 15.337965-51.126549 13.804168-18.405558-1.533796-35.788584-6.646451-52.14908-14.315434-32.720991-15.84923-62.37439-37.322381-89.982726-61.351859-24.029478-20.45062-48.058956-40.901239-70.554638-62.885655-25.052009-24.540744-49.081487-49.592753-73.110965-75.667293-16.871761-17.894292-32.720991-36.811115-48.058956-56.239204-19.939354-24.540744-37.833646-50.104018-51.126549-78.734885-9.714044-20.961885-15.84923-42.946301-12.781638-66.464514 2.045062-16.360496 8.180248-29.653398 19.939354-41.412505 14.826699-15.337965 30.164664-30.675929 44.480098-47.036425 10.22531-11.247841 17.894292-25.052009 15.337965-40.901239-2.556327-14.315434-7.668982-28.630867-13.804168-41.412505-10.736575-21.984416-25.052009-41.412505-40.90124-60.329328-13.804168-16.871761-28.119602-33.232257-46.525159-44.991363-12.270372-7.668982-25.563275-12.781637-40.389974-9.714044-20.45062 4.090124-36.29985 16.871761-51.126549 30.675929-14.315434 13.292903-27.608336 27.097071-41.412505 41.412505-6.646451 6.646451-13.804168 13.292903-17.894292 21.473151-10.22531 14.315434-11.759106 31.187195-11.759106 48.058956z" fill="#1296db" p-id="8552"></path></svg><svg v-else t="1589953816116" class="wewhat" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8143" width="16" height="16"><path d="M679.538761 615.349833c-16.619516-4.456498-42.016953 23.685445-42.016953 23.685445-8.117888 8.117888-15.487739 21.817911-21.99699 36.363186-10.400884 23.242354-39.557948 31.860638-60.655452 17.602913-85.916788-58.06444-168.970366-141.340075-226.592738-227.297796-13.837146-20.641109-5.952572-48.862871 16.253172-60.016909 20.278859-10.18599 39.021735-20.033265 39.021735-20.033265l-0.152473-0.508583c13.866822-6.311753 21.666462-21.914102 17.600867-37.090756 0 0-116.005061-284.032962-149.172461-284.032962-103.732549 0-187.845249 84.1127-187.845249 187.845249 0 23.793916 4.590552 46.334281 12.730952 67.206658 87.034239 302.014498 324.763618 539.5341 626.778116 626.778116 20.871353 8.140401 43.621497 12.730952 67.415412 12.730952 103.731526 0 189.410907-79.103616 189.410907-182.836165C960.317609 775.745916 817.401642 670.753677 679.538761 615.349833z" p-id="8144" fill="#1296db"></path></svg> {{tel}}</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="cp-container">
            <div class="detailedevaluation">
                <div class="left-box">
                    <div class="detailed">
                        <span :class="introduce? 'detaileds addname':'detaileds'" @click="introduces">详细介绍</span>
                        <span :class="evaluate?'evalu addname':'evalu'" @click="evaluates">累计评价({{listLength}})</span>
                    </div>
                    <div v-show="introduce">
                        <div class="products">产品详情</div>
                        <div class="model" v-if="listitem.supplyDemandType==='EQUIPMENT_LEASING'">
                            <div class="modelone"><span>类型</span><span>型号</span><span>出厂时间</span></div>
                            <div><span v-if="listitem.supplyDemandType==='EQUIPMENT_LEASING'">设备租赁</span>
                                <!-- <span v-if="listitem.supplyDemandType==='CAPABILITY_SERVICE'">设备租赁</span> -->
                                <!-- <span v-if="listitem.supplyDemandType==='EQUIPMENT_LEASING'">设备租赁</span> -->
                                <span class="modelnum">{{FILTER_FORMATER.wordNum(listitem.equipmentModel,10)}}</span><span>{{listitem.deliveryTime}}</span></div>
                            <div class="modelone modelthree"><span>设备规格</span><span>数量</span><span>工作小时数</span></div>
                            <div><span class="hidetext">{{FILTER_FORMATER.wordNum(listitem.equipmentSpecs,10)}}</span><span>{{listitem.equipmentNum}}</span><span>{{listitem.workingHours}}</span></div>
                        </div>
                        <div class="models" v-if="listitem.supplyDemandType==='CAPABILITY_SERVICE'">类型：能力服务</div>
                        <div class="models" v-if="listitem.supplyDemandType==='LABOR_FORCE'">
                            <div>类型：劳动力</div>
                            <div>团队人数：{{listitem.peopleNum}}人</div>
                            <div>班组负责人：{{listitem.teamLeader}}</div>
                        </div>
                        <div class="morecontent" v-html="`描述:${listitem.serviceInfo}`">
                        </div>
                        <div class="products" v-if="listitem.supplyDemandType==='EQUIPMENT_LEASING'">整体外观</div>
                        <div class="img-boxs" v-if="listitem.supplyDemandType==='EQUIPMENT_LEASING'"  v-for="(item,i) in listitem.serviceImgs" :key="i">
                            <el-image
                                :src="`${basefile}${item.fileShowUrl}`"
                                style="width: 560px; height: 400px"
                                fit="contain">
                            </el-image>
                            <!-- <img :src="`${basefile}${listitem.serviceImgs[0].fileShowUrl}`" alt=""> -->
                        </div>
                    </div>
                    <div v-show="evaluate">
                        <comment-view :isShowScore="true" :isComment="true" comment-type="SUPPLY" :comment-id="$route.params.id" @getLength="getLength"></comment-view>
                    </div>
                </div>
                <div class="ri-box">
                    <div class="flexone-boxs box-one">
                        <div class="guarantee">全程保障交易安全</div>
                        <div class="bear"><div><img class="money" src="~/static/img/qd/money.png" alt=""></div><div><div class="bears">资金担当</div><div class="jymoy">交易资金托管平台，保障资金安全，确认完成再付款</div></div></div>
                        <div class="bear"><div><img class="money" src="~/static/img/qd/sf.png" alt=""></div><div><div class="bears">实名认证</div><div class="jymoy">服务商100%实名认证，官方把关，核实身份</div></div></div>
                        <div class="bear"><div><img class="money" src="~/static/img/qd/guan.png" alt=""></div><div><div class="bears">官方介入</div><div class="jymoy">交易过程中产生纠纷，官方100%介入</div></div></div>
                    </div>
                    <div class="flextwo-boxs">
                        <div class="flex-boxs box-one">
                            <div class="guarantee">本店其他服务</div>
                            <div class="bear" v-for="(val,idx) in listarr" :key="idx"><div>
                                <nuxt-link :to="`/qiao/s/detail/${val.id}`">
                                    <img class="moneys" :src="`${basefile}${val.fileShowUrl}?x-oss-process=image/resize,w_${87}`" alt="">
                                </nuxt-link>
                            </div><div>
                                <nuxt-link :to="`/qiao/s/detail/${val.id}`">
                                    <div class="bearm">{{FILTER_FORMATER.wordNum(val.serviceName,22)}}</div>
                                    <div class="jymoym">{{val.servicePrice}}元</div>
                                    <div class="jymoys">{{'成交'+val.orderNum+'次'}}</div>
                                </nuxt-link>
                            </div></div>
                            <!-- <div class="bear"><div><img class="moneys" src="~/static/img/qd/ta.png" alt=""></div><div><div class="bearm">实名认证</div><div class="jymoym">3000</div><div class="jymoys">成交2次</div></div></div>
                            <div class="bear"><div><img class="moneys" src="~/static/img/qd/ta.png" alt=""></div><div><div class="bearm">官方介入</div><div class="jymoym">3000</div><div class="jymoys">成交2次</div></div></div>
                            <div class="bear"><div><img class="moneys" src="~/static/img/qd/ta.png" alt=""></div><div><div class="bearm">官方介入</div><div class="jymoym">3000</div><div class="jymoys">成交2次</div></div></div> -->
                        </div>
                    </div>
                    <div class="flexthree-boxs">
                        <div
                            id="container"
                            class="map"
                            style="margin-top:30px; width: 1200px;height:300px;border: 1px solid #f4d3ba;"></div>
                    </div>
                </div>
            </div>
        </div>
        <dialog-buy
            v-if="isShowDialog"
            :info="listitem"
            :s-dialog-show="isShowDialog"
            @dialogCallback="dialogCallback">
        </dialog-buy>
        <validatUser :isFlag.sync="isFlag" @callBackClose="callBackClose"></validatUser>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from 'nuxt-property-decorator'
import {getListDetail, getLifwDetail} from '~/api/servicehall/index'
import dialogBuy from '~/components/service/dialogBuy.vue'
import collection from '~/components/common/collection.vue'
import shareTooltip from '~/components/common/shareTooltip.vue'
import commentView from '~/components/common/commentView.vue'
import {open53Server} from '~/method'
import validatUser from '~/components/common/validatUser.vue'
@Component({
    layout: 'shop',
    head () {
        const that = this as any
        return {
            title: `${that.listitem.serviceName}-供需中心-CIIP`,
            meta: [
                {hid: 'description', name: 'description', content: '在这里提交自己的相关需求，等待服务方接单。'},
                {hid: 'keyword', name: 'keyword', content: '服务名称，(一级分类)，(二级分类)'}
            ],
            script: [
                {src: 'https://webapi.amap.com/maps?v=1.3&key=6e7239cd1f1aaf595bca3753a67986f8'}
            ]
        }
    },
    components: {
        dialogBuy,
        collection,
        commentView,
        shareTooltip,
        validatUser
    },
    validate ({params}) {
        return /^\d+$/.test(params.id)
    },
    async asyncData ({params, error}) {
        const {data}: any = await getLifwDetail({id: params.id})
        let listitem: any = {}
        // let value: number = 0
        if (data.code >= 0) {
            const info = data.data
            info.totalScore = info.totalScore || 4.5
            info.serviceLocationProvince = JSON.parse(info.serviceLocationProvince)
            info.serviceTags = JSON.parse(info.serviceTags)
            // value = data.data.totalScore || 4.5
            listitem = info
        } else {
            error({statusCode: 500, message: data.msg})
        }
        return {
            listitem
            // value
        }
    }
})
export default class SdetailIndex extends Vue {
    isShowDialog: boolean = false
    introduce: boolean = true
    evaluate: boolean = false
    // value:number = 0
    listLength:number = 0
    listitem:any = {}
    listarr:any = []
    address:string = ''
    isFlag:boolean = false
    basefile: string = this.$store.state.basefile
    isHovers:boolean = true
    isShows:boolean = true
    tel:string = '获取电话'
    timer: any = null
    mounted () {
        // this.getListDetail()
        this.getLifwDetail()
        setTimeout(() => {
            // console.log(66)
            this.init()
        }, 1000)
        // this.reurl()
    }
    // reurl () { // 解决第一次进入不加载js文件
    //     if (location.href.includes('#reloaded') === false) {
    //         location.href = location.href + '#reloaded'
    //         location.reload()
    //     }
    // }
    async init () {
        try {
            if ((window as any).AMap) {
                // console.log(98)
                clearTimeout(this.timer)
                await this.getLocation()
            }
        } catch {
            // console.log(77)
            this.timer = setTimeout(() => {
                this.init()
            }, 200)
        }
    }
    callBackClose (val:any) {
        // console.log(val)
        if (val) {
        }
    }
    tofloat (val:any) {
        const num = parseFloat(val)
        let number = ''
        if (num < 10000) {
            number = (num / 1).toFixed(2) + '元'
        } else if (val === '') {
            number = '商议'
        } else {
            number = (num / 10000).toFixed(2) + '万元'
        }
        return number
    }
    open53Server () {
        open53Server()
    }
    gettel (val:any) {
        if (this.$store.state.haslogin) {
            if (this.$store.state.userinfo.selectRoleType === 'PERSON' && this.$store.state.userinfo.realStatus === 'REAL_STATUS_PASS') {
                this.tel = val
            } else if (this.$store.state.userinfo.selectRoleType === 'ENTERPRISE' && this.$store.state.userinfo.ciipEnterpriseCertStatus === 'PASS') {
                this.tel = val
            } else {
                this.isFlag = true
            }
        } else {
            this.$message.warning('请先登录')
        }
    }
    getLocation () {
        const vthis = this
        const ajax = new XMLHttpRequest()
        ajax.open('get', 'https://restapi.amap.com/v3/geocode/geo?key=6e7239cd1f1aaf595bca3753a67986f8&address=' + vthis.address)
        ajax.send()
        ajax.onreadystatechange = function () {
            if (ajax.readyState === 4 && ajax.status === 200) {
                const arres = JSON.parse(ajax.responseText)
                if (arres.status === '1') {
                    vthis.initAMap(arres.geocodes[0].location)
                }
            }
        }
    }
    initAMap (data:any) {
        const map = new (window as any).AMap.Map('container', {
            resizeEnable: true,
            zoom: 20,
            center: data.split(',')
        }); (window as any).AMap.plugin('AMap.Geocoder', function () {
            const marker = new (window as any).AMap.Marker({
                map,
                bubble: true
            })
            // console.log(marker)
        })
    }
    async getListDetail (val:any) {
        const {data}:any = await getListDetail({userid: val})
        if (data.code >= 0) {
            this.listarr = data.data.slice(0, 4)
        }
    }
    getLifwDetail () {
        this.getListDetail(this.listitem.createUserId)
        if (this.listitem['supplyShop.id'] !== '') {
            this.$store.commit('setShopId', this.listitem['supplyShop.id'])
        }
        // console.log('***', this.listitem)
        this.address = this.listitem.serviceLocationProvince.label
    }
    handleOption () {
        if (!this.$store.state.haslogin) {
            this.isShowDialog = false
            // this.dialogShow = true
            this.$message.warning('请先登录')
        } else {
            this.isShowDialog = true
        }
    }
    dialogCallback (flag: boolean) {
        this.isShowDialog = flag
    }
    evaluates () {
        this.evaluate = true
        this.introduce = false
    }
    introduces () {
        this.introduce = true
        this.evaluate = false
    }
    gohovers () {
        this.isHovers = false
    }
    dohovers () {
        this.isHovers = true
    }
    getLength (val:number) {
        // console.log(val)
        this.listLength = val
    }
}
</script>
<style lang="scss" scoped>
div#container {
    width: 300px!important;
    height: 320px!important;
    margin-top: 0px!important;
}
    // .img-wjj{
    //     width: 501px;
    //     height: 410px;
    //     &>img {
    //         width: 100%;
    //         height: 100%;
    //     }
    // }
    .flrt{
        color: #ccc;
        font-size: 14px;
        margin-left: 10px;
    }
    .contact{
        cursor: pointer;
    }
.detailedevaluation{
    background-color: #f0f0f0;
    margin-bottom: 20px;
    display: flex;
    .left-box{
        padding: 10px;
        width: 920px;
        // height: 1070px;
        background-color: #fff;
        margin-right: 20px;
        .addname::before{
            display: block!important;
        }
        .detailed{
            position: relative;
            .detaileds::before{
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 75px;
                height: 2px;
                background-color: #6cc1ee;
                display: none;
            }
            .detaileds:hover{
                &:before{
                    display: block;
                }
            }
            .evalu::before{
                content: '';
                position: absolute;
                bottom: 0;
                left: 107px;
                width: 75px;
                height: 2px;
                background-color: #6cc1ee;
                display: none;
            }
            .evalu:hover{
                &:before{
                    display: block;
                }
            }
            span {
                display: inline-block;
                padding: 10px;
                margin-right: 20px;
                font-size: 14px;
                cursor: pointer;
                border-bottom: 2px solid #fff;
            }
            // span:hover {
            //     display: inline-block;
            //     padding: 10px;
            //     margin-right: 20px;
            //     font-size: 14px;
            //     border-bottom: 2px solid #11a9e8;
            // }
        }
        .products {
            margin: 20px 0px;
            border-left: 2px solid #6cc1ee;
            padding-left: 10px;
        }
        .img-boxs{
            width: 560px;
            height: 400px;
            margin: 20px auto;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .model{
            padding: 15px;
            // height: 200px;
            background-color: #fbfbfb;
            border-radius: 2px;
            font-size: 14px;
            display: flex;
            height: 120px;
            line-height: 30px;
            .modelnum {
                width: 240px;
                height: 30px;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                overflow: hidden;
                line-break: normal;
                -webkit-box-orient: vertical;
            }
            .hidetext{
                width: 300px;
                height: 30px;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                overflow: hidden;
                line-break: normal;
                -webkit-box-orient: vertical;
            }
            div{
                // height: 40px;
                // line-height: 40px;
                display: flex;
                flex-direction: column;
            }
            .modelone{
                margin-right: 70px;
            }
            .modelthree{
                margin-left: 10px;
            }
        }
        .models{
            padding: 15px;
            // height: 200px;
            background-color: #fbfbfb;
            border-radius: 2px;
            font-size: 14px;
            display: flex;
            height: 60px;
            line-height: 30px;
            div{
                // height: 40px;
                // line-height: 40px;
                display: flex;
                flex-direction: column;
                margin-right: 50px;
            }
        }
        .morecontent >>> div {
            float: none!important;
        }
        .img-cont{
            width: 500px;
            height: 400px;
            margin: 10px auto;
            .more-img{}
        }
    }
    .ri-box{
        // width: 260px;
        // height: 310px;
        flex: 1;
        // margin-bottom:10px;
        background-color: #f0f0f0;
        display: flex;
        flex-direction: column;
        .flexone-boxs{
            padding: 5px;
            // display: flex;
            margin-bottom: 10px;
            // -webkit-flex: 1;
            // flex: 1;
            height: 300px;
            background-color: #fff;
        }
        .flextwo-boxs{
            padding: 5px;
            // display: flex;
            margin-bottom: 10px;
            // -webkit-flex: 2;
            // flex: 2;
            height: 430px;
            background-color: #fff;
        }
        .flexthree-boxs{
            width: 300px;
            // padding: 5px;
            // display: flex;
            // margin-bottom: 10px;
            // -webkit-flex: 1;
            // flex: 1;
            height: 320px;
            background-color: #fff;
        }
        .box-one{
            padding: 10px;
            // background-color: #ccc;
        }
        .guarantee{
            padding: 10px;
        }
        .bear{
            display: flex;
            margin-bottom: 20px;
            margin-top: 5px;
            .money{
                margin-right: 10px;
            }
            .moneys{
                margin-right: 10px;
                width: 87px;
            }
            .bears{
                font-size: 14px;
                margin-bottom: 10px;
            }
            .jymoy{
                font-size: 12px;
                color: #ccc;
            }
            .bearm{
                color: black;
                font-size: 14px;
                height: 36px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                overflow: hidden;
                line-break: normal;
                -webkit-box-orient: vertical;
                // margin-bottom: 10px;
            }
            .jymoys{
                font-size: 14px;
                color: #ccc;
            }
            .jymoym{
                font-size: 14px;
                color: red;
            }
        }
    }
}
.information{
    width: 100%;
    // height: 480px;
    background-color: #fff;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 25px 20px 10px 20px;
    display: flex;
    .share:hover{
        color: #11a9e8;
    }
    // justify-content: space-between;
    .informationt{
        margin-left: 40px;
        font-size: 14px;
        .machinery{
            font-size: 18px;
        }
        .newMachine{
            // height: 54px;
            // line-height: 54px;
            span{
                margin: 20px 6px;
                padding: 3px;
                display: inline-block;
                // width: 54px;
                // height: 22px;
                border: 1px solid #f3f5f7;
                color: #11a9e8;
                border-radius: 20px;
                font-size: 14px;
            }
        }
        .public{
            height: 40px;
            line-height: 40px;
            display: flex;
            .nearbs{
                width: 500px;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                overflow: hidden;
                line-break: normal;
                -webkit-box-orient: vertical;
            }
        }
        .lease{
            margin: 20px 0px;
            .immedlease{
                cursor: pointer;
                margin-left: 95px;
                width: 120px;
                height: 34px;
                line-height: 34px;
                display: inline-block;
                color: #fff;
                background-color: #11a9e8;
                text-align: center;
                border-radius: 4px;
            }
            .span-btn-item{
                    font-size: 14px;
                    color: #666;
                    margin-left: 20px;
                    margin-right: 20px;
                    cursor: pointer;
                    .icon{
                        margin-right: 4px;
                    }
                    .icon-weixin_hover{
                        display: none;
                    }
                    &:hover{
                        color: #11a9e8;
                        .icon-weixin_hover{
                            display: inline-block;
                        }
                        .icon-weixin{
                            display: none;
                        }
                    }
                }
        }
        .score{
            margin: 10px 0px;
            display: flex;
            .rl-img{
                position: relative;
            }
            .achievements{
                font-size: 14px;
                color: #bdbdbd;
                margin-right: 24px;
                position: relative;
                top: -7px;
            }
            .stars{
                display: flex;
                flex-direction: column;
                span:first-child{
                    margin-bottom: 10px;
                }
            }
            .achievement{
                font-size: 14px;
                color: #6cc1ee;
                margin-right: 24px;
            }
            .quality{
                font-size: 14px;
            }
        }
        .much{
            margin-right: 65px;
        }
        .numDay{
            font-size: 20px;
            color: #ff5a5a;
        }
        .numbers{
            margin-right: 65px;
        }
        .numbes{
            margin-right: 22px;
        }
        .transactions{
            margin-right: 35px;
        }
        .elrate{
            display: inline-block;
            position: relative;
            top: -2px;
        }
        .numbs{
            color: #6cc1ee;
            margin-right: 5px;
        }
    }
}

</style>
<style  lang="scss">
.morecontent{
            margin-top: 10px;
            padding: 10px;
            font-size: 14px!important;
            color: #333!important;
            img {
                max-width: 100%!important;
            }
            div {
                max-width: 860px!important;
                float: none!important;
                margin: 0 auto;
            }
            p,dl {
                max-width: 860px!important;
                margin: 0 auto;
            }
        }
        .img-wjj{
            .el-carousel__container {
                width: 500px;
                height: 410px;
            }
        }
</style>
